<template>
  <view class="result-table" :style="{ height: height || '170rpx' }">
    <view class="table-header-row">
      <view class="table-header-item">Dispersal?</view>
      <view class="table-header-item">Credibility</view>
    </view>
    <view class="table-content-row">
      <view class="table-content-item">{{ result === 'san1' ? 'Yes' : 'No' }}</view>
      <view class="table-content-item">{{ (credibility * 100).toFixed(2) }}%</view>
    </view>
  </view>
</template>

<script setup>
// 定义组件的props
const props = defineProps({
  result: {
    type: String,
    required: true
  },
  credibility: {
    type: Number,
    required: true
  },
  height: {
    type: String,
    default: '170rpx'
  }
});
</script>

<style scoped lang="less">
.result-table {
  font-size: 25rpx;
  display: flex;
  flex-direction: column;
  border-collapse: collapse; // 模拟表格边框合并效果
  border-radius: 10rpx;

  .table-header-row {
    background-color: #4CAF50; // 表头背景颜色
    color: #fff;
    display: flex;
    height: 50%;
    width: 100%;

    .table-header-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5rpx;
      text-align: center;
      border: 1rpx solid #000;
      box-sizing: border-box;
    }
  }

  .table-content-row {
    background-color: #fff; // 表体背景颜色
    display: flex;
    height: 50%;
    width: 100%;

    .table-content-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5rpx;
      text-align: center;
      border: 1rpx solid #000;
      box-sizing: border-box;
    }
  }
}
</style>